<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>befory-admin</title>
  <link rel="stylesheet" href="plugin/layui/css/layui.css"  media="all">
		<link rel="stylesheet" href="plugin/layui/css/modules/layer/default/layer.css" />
		<style type="text/css">
			.layui-layout-admin .layui-side{
				z-index: 1001;
			}
			.layui-layout-admin .layui-header{
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 60px;
			}
			.layui-layout-admin .layui-logo{
				position: fixed;
				/*z-index: 1002;*/
			}
			.layui-layout-admin .layui-body .layui-tab-item{
				position: absolute;
				top: 50px;
				left: 0;
				right: 0;
				bottom: 0;
				overflow: hidden;
			}
			
			.layui-layout-label85{
				width: 85px !important;
			}
			/*.layui-layout-container{
				padding: 0 0 !important;
				margin: 0 0 !important;
			}*/
		</style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
  <div class="layui-header" id="nav">
    <!-- 头部区域（可配合layui已有的水平导航） -->
    <!--<ul class="layui-nav layui-layout-left">
      <li class="layui-nav-item"><a href="">控制台</a></li>
      <li class="layui-nav-item"><a href="">商品管理</a></li>
      <li class="layui-nav-item"><a href="">用户</a></li>
      <li class="layui-nav-item">
        <a href="javascript:;">其它系统</a>
        <dl class="layui-nav-child">
          <dd><a href="">邮件管理</a></dd>
          <dd><a href="">消息管理</a></dd>
          <dd><a href="">授权管理</a></dd>
        </dl>
      </li>
    </ul>-->
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item">
        <a href="javascript:;">
          <img src="http://t.cn/RCzsdCq" class="layui-nav-img">
          befory
        </a>
        <dl class="layui-nav-child">
          <dd><a href="">基本资料</a></dd>
          <dd><a href="">安全设置</a></dd>
        </dl>
      </li>
      <li class="layui-nav-item"><a href="">退出</a></li>
    </ul>
  </div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
      <div class="layui-logo">beforyAdmin</div>
      <ul class="layui-nav layui-nav-tree"  lay-filter="test" id="menu">
        <!--<li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">所有商品</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="javascript:;">列表三</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">解决方案</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">列表一</a></dd>
            <dd><a href="javascript:;">列表二</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="">云市场</a></li>
        <li class="layui-nav-item"><a href="">发布商品</a></li>-->
      </ul>
    </div>
  </div>
      

  <div class="layui-body">
    <!-- 内容主体区域 -->
    <div class="layui-tab" lay-filter="demo" lay-allowclose="true" id="tab">
  <ul class="layui-tab-title" id="tab-header">
    <li class="layui-this" lay-id="11">首页</li>
    <!--<li lay-id="22">用户管理</li>
    <li lay-id="33">权限分配</li>
    <li lay-id="44">商品管理</li>
    <li lay-id="55">订单管理</li>-->
  </ul>
  <div class="layui-tab-content" id="content">
    <div class="layui-tab-item layui-show">
    	<!--<div class="layui-container layui-layout-container">  
  			常规布局（以中型屏幕桌面为例）：
  			<div class="layui-row">
    			<div class="layui-col-md9">
      			你的内容 9/12
    			</div>
    			<div class="layui-col-md3">
      			你的内容 3/12
    			</div>
  			</div>
  		</div>-->
  		
  		<div class="layui-fluid">
  			<div class="layui-row">
    			<div class="layui-col-sm4">
    				
      			<div class="layui-row">
      				<div class="layui-col-md12">龙虎榜</div>
      			</div>
      			
      			<div class="layui-row">
      				<div class="layui-col-md4">
      					<input type="text" class="layui-input" id="selectDate">
      				</div>
      				<div class="layui-col-md4">
      					<button class="layui-btn">前一天</button>
      				</div>
      				<div class="layui-col-md4">
      					<button class="layui-btn">后一天</button>
      				</div>
      			</div>
      			
      			<div class="layui-row">
      				<div class="layui-col-md-12">
      					<table id="winnersList" lay-filter="winnersList">
      						
      						<colgroup>
								    <col width="150">
								    <col width="200">
								    <col>
								  </colgroup>
								  <thead>
								    <tr>
								      <th>昵称</th>
								      <th>加入时间</th>
								      <th>签名</th>
								    </tr> 
								  </thead>
								  <tbody>
								    <tr>
								      <td>贤心</td>
								      <td>2016-11-29</td>
								      <td>人生就像是一场修行</td>
								    </tr>
								    <tr>
								      <td>许闲心</td>
								      <td>2016-11-28</td>
								      <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
								    </tr>
								  </tbody>
      					</table>
      				</div>
      			</div>
      			
    			</div>
    			<div class="layui-col-md8">
      			<div class="layui-row">
      				<div class="layui-col-md2">
      					<div class="layui-inline">
      						<!--<label class="layui-form-label">一月内大宗交易</label>
      						<div class="layui-input-inline">
      							
      						</div>-->
      						一月内大宗交易
      					</div>
      				</div>
      				
      				<div class="layui-col-md2">
      					<div class="layui-inline">
      						<label class="layui-form-label">上榜次数：</label>
	      					<div class="layui-input-block">
	      						<input class="layui-input"/>
	      					</div>
	      				</div>
      				</div>
      				
      				<div class="layui-col-md8">
      					<div>
      						<label class="layui-form-label">买入主力：</label>
      						<div class="layui-input-block">
      							<input class="layui-input"/>
      						</div>
      					</div>
      				</div>
      			</div>
      			
      			
      			<div class="layui-row">
      				<div class="layui-col-md2">
      					<div class="layui-inline">
      						<label class="layui-form-label">成交数量：</label>
      						<div class="layui-input-block">
      							<input class="layui-input "/>
      						</div>
      					</div>
      				</div>
      				
      				<div class="layui-col-md2">
      					<div class="layui-inline">
      						<label class="layui-form-label">成交金额：</label>
	      					<div class="layui-input-block">
	      						<input class="layui-input"/>
	      					</div>
	      				</div>
      				</div>
      				
      				<div class="layui-col-md8">
      					<div>
      						<label class="layui-form-label">卖出主力：</label>
      						<div class="layui-input-block">
      							<input class="layui-input"/>
      						</div>
      					</div>
      				</div>
      			</div>
      			
      			
      			<div class="layui-row">
      				<div class="layui-col-md2">
      					<div class="layui-inline">
      						<label class="layui-form-label">股票名称：</label>
      						<div class="layui-input-block">
      							<input class="layui-input"/>
      						</div>
      					</div>
      				</div>
      				
      				<div class="layui-col-md2">
      					<div class="layui-inline">
      						<label class="layui-form-label">股票代码：</label>
	      					<div class="layui-input-block">
	      						<input class="layui-input"/>
	      					</div>
	      				</div>
      				</div>
      				
      				<div class="layui-col-md2">
      					<div class="layui-inline">
      						<label class="layui-form-label">今收：</label>
      						<div class="layui-input-block">
      							<input class="layui-input"/>
      						</div>
      					</div>
      				</div>
      				
      				<div class="layui-col-md2">
      					<div class="layui-inline">
      						<label class="layui-form-label">涨幅：</label>
      						<div class="layui-input-block">
      							<input class="layui-input"/>
      						</div>
      					</div>
      				</div>
      				
      				<div class="layui-col-md4">
      					<div class="layui-form-item">
      						<label class="layui-form-label">成交总金额：</label>
      						<div class="layui-input-block">
      							<input class="layui-input"/>
      						</div>
      					</div>
      				</div>
      			</div>
      			
      			<div class="layui-row">
      				<div class="layui-col-md12">
      					<div>
      						<label class="layui-form-label">上榜理由：</label>
      						<div class="layui-input-block">
      							<input class="layui-input"/>
      						</div>
      					</div>
      				</div>
      			</div>
      			
      			
      			<div class="layui-row">
      				<div class="layui-col-md-12">
      					<div>22</div>
      					<div>22</div>
      					<div>22</div>
      					<div>22</div>
      					<div>22</div>
      					<div>22</div>
      					<div>22</div>
      					<div>22</div>
      					<div>22</div>
      				</div>
      			</div>
      			
      			<div class="layui-row">
      				<div class="layui-col-md3">
      					<div>关注个股：</div>
      					<div>
      								<div>22</div>
      					<div>22</div>
      					<div>22</div>
      					<div>22</div>
      					<div>22</div>
      					</div>
      				</div>
      				
      				<div class="layui-col-md9">
      					<div class="layui-row">
      						<div class="layui-col-md3">关注游资-买卖股票</div>
      						<div class="layui-col-md3">设置关注游资</div>
      						<div class="layui-col-md6">将上面的股票加入龙虎榜自选股及剪切板</div>
      					</div>
      					
      					<div class="layui-row">
      						<div class="layui-col-md12">
      									<div>22</div>
      					<div>22</div>
      					<div>22</div>
      					<div>22</div>
      					<div>22</div>
      							</div>
      					</div>
      				</div>
      			</div>
      			
    			</div>
  			</div>
  		</div>
    </div>
    <!--<div class="layui-tab-item">内容2</div>
    <div class="layui-tab-item">内容3</div>
    <div class="layui-tab-item">内容4</div>
    <div class="layui-tab-item">内容5</div>-->
  </div
  </div>

  <div class="layui-footer">
    <!-- 底部固定区域 -->
    © befory.com - 底部固定区域
  </div>
</div>
<script src="plugin/layui/layui.js"></script>
<script>
	layui.config({
		base:'/beforyAdmin/js/'
	}).extend({
		menu:'json-data'
	});
//JavaScript代码区域
layui.use(['element','menu','laydate','table'], function(){
  var element = layui.element;
  var $ = layui.jquery;
  var menuObj = layui.menu; 
  var laydate = layui.laydate;
  var table = layui.table;
//	$("#list_one").on("click",function(){
//		var test ='dd';
//		var isOpen = $("#tab ul li[lay-id="+test+"]").length;
//		if(isOpen <= 0){
//			element.tabAdd('demo', {
//	        title: '新选项'+ (Math.random()*1000|0) //用于演示
//	        ,content: '内容'+ (Math.random()*1000|0)
//	        ,id: test //实际使用一般是规定好的id，这里以时间戳模拟下
//	    }); 
//		}
//		element.tabChange('demo',test);
//	})

//	console.log(menuObj.getMenu());
	//遍历左侧菜单
	var menuList = menuObj.getMenu();
	$.each(menuList, function(i,n) {
		$('#menu').append('<li class="layui-nav-item"><a href="javascript:;" data-id="'+n.id+'" data-url="'+n.url+'" data-name="'+n.name+'">'+n.name+'</a></li>')
	});

	//菜单点击
	$("#menu").on('click','li a',function(){
		var layId =  $(this).attr('data-id');
		var url =  $(this).attr('data-url');
		var name = $(this).attr('data-name');
		var isOpen = $("#tab ul li[lay-id="+layId+"]").length;
		if(isOpen <= 0){
			element.tabAdd('demo', {
	        title: name //用于演示
	        ,content: '<iframe src="index.html" width="100%" height="100%"></iframe>'
//	        ,content: '../index2.html'

	        ,id: layId //实际使用一般是规定好的id，这里以时间戳模拟下
	    }); 
		}
		element.tabChange('demo',layId);
	});
	
	
	//时间
	laydate.render({
    elem: '#selectDate' //指定元素
    ,value: '2019-05-23'
 });
 
 
// 	table.render({
// 		 elem: '#winnersList'
//  ,height: 100%
//  ,url: '/demo/table/user/' //数据接口
//  ,page: true //开启分页
//  ,cols: [[ //表头
//    {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
//    ,{field: 'username', title: '用户名', width:80}
//    ,{field: 'sex', title: '性别', width:80, sort: true}
//    ,{field: 'city', title: '城市', width:80} 
//    ,{field: 'sign', title: '签名', width: 177}
//    ,{field: 'experience', title: '积分', width: 80, sort: true}
//    ,{field: 'score', title: '评分', width: 80, sort: true}
//    ,{field: 'classify', title: '职业', width: 80}
//    ,{field: 'wealth', title: '财富', width: 135, sort: true}
//  ]]
// 	});
});

//function changeFrameHeight(obj){
////  var ifm= document.getElementById("iframepage"); 
//		var nav = document.getElementById("nav");
//		console.log(nav);
//		var navHeight = nav.offsetHeight;
//		
//		var tabHeader = document.getElementById("tab-header");
//		var tabHeaderHeight = tabHeader.offsetHeight;
//		//屏幕高
//		var availHeight = window.screen.availHeight;
//		var scrollHeight = document.body.scrollHeight;
//		console.log("navHeight ->"+navHeight);
//		console.log("tabHeaderHeight ->"+tabHeaderHeight);
//		console.log("availHeight ->"+availHeight);
//		console.log("scrollHeight ->"+scrollHeight);
//		console.log("tabHeaderHeight ->"+tabHeaderHeight);
//  obj.height=scrollHeight-navHeight-tabHeaderHeight;
//
//}
//
//window.onresize=function(){  
//   changeFrameHeight();  
//
//} 
</script>
</body>
</html>